<!-- 视频组件 -->
<template>
  <div class="videoview">
    <img
      :src="getVideoFirstPicture(config.ConfigData.src)"
      mode="aspectFit"
      class="myvideoc firstimg"
      lazy-load
    />
    <div class="playiconview">
      <img
        class="playicon"
        src="@/images/playvideo.png"
        mode="scaleToFill"
        lazy-load
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoCopt",
  props: {
    config: Object
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="scss">
.videoview {
  padding: 0 10px;
  position: relative;
  background-color: #000;
  .myvideoc {
    width: 100%;
    height: 410px;
    border-radius: 10px;
  }
  .firstimg {
    z-index: 2;
    //position: absolute;
    top: 0;
    left: 0;
  }
  .playiconview {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    width: 100%;
    height: 410px;
    background: rgba(17, 17, 17, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    .playicon {
      width: 30px;
      height: 38px;
    }
  }
}
</style>
